【Fes】基于canvas的前端动画/游戏入门（五）

重力加速度

【科普】重力加速度是一个物体受重力作用的情况下所具有的加速度。也叫自由落体加速度，用 g 表示。方向竖直向下。通常指地面附近物体受地球引力作用在真空中下落的加速度，记为 g。为了便于计算，其近似标准值通常取为 980 厘米/秒的二次方或 9.8 米/秒的二次方。

真实的物体是有质量的，所以其重力加速度是由于重力产生，而我们计算机中的抽象物体并没有质量，所有也不存在重力一说，我们这里说的重力加速度只是借用了物理上的概念，实际上是人为定义的一个方向指向 y 轴正半轴的加速度。
其实实现起来很简单，就是设定一个为正的加速度，每次绘制都加到物体的 y 轴速度上。
下面的示例是一个 ball，它会受重力加速度 gravity 而自动下落，你可以使用键盘的上、下、左、右改变其四个方向上的加速度。核心代码如下：
完整示例：重力加速度演示

(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);

  vx += ax;
  vy += ay;
  vy += gravity;
  ball.x += vx;
  ball.y += vy;
  ball.draw(context);
}());

模拟摩擦力

【科普】阻碍物体相对运动（或相对运动趋势）的力叫做摩擦力。摩擦力的方向与物体相对运动（或相对运动趋势）的方向相反。一个物体在另一个物体表面发生滑动时，接触面间产生阻碍它们相对运动的摩擦，称为滑动摩擦。滑动摩擦力的大小与接触面的粗糙程度的大小和压力大小有关。压力越大，物体接触面越粗糙，产生的滑动摩擦力就越大。

之前的例子中有一些非常不自然的场景，比如跟随鼠标的箭头，由于加速度始终存在，导致运动永远不可能停止，而在现实中（太空例外），由于存在各种摩擦力的关系，这是不可能发生的情况。
计算机中没有摩擦力，我们只是借鉴物理中的概念模拟一个模拟摩擦力，请记住这个并不是物理意义的力。

【定义】模拟摩擦力是人为规定的值，定义和滑动摩擦力相似都与运动方向相反的量，将物体速度削减到 0 为止，不会改变运动方向。

注意：根据定义只能将物体的速率减去与一定大小的值，而不能分别在 x、y 轴上减小速度向量。如果物体正沿着某个角度运动，就会出现物体在某条轴的速度降为零，而继续在另一条轴上运动的奇怪现象。

正确做法

我们将模拟摩擦力用变量 friction 表示，示例会演示随机速度的 ball 从运动到停止的过程，核心代码如下，基本思路：

【科普】速度和速率是两个不同的概念。速度是矢量，具有大小和方向；速率则纯粹指物体运动的快慢，是标量，没有方向。

1. 将 vx 与 vy 平方后求和，再开方求出速率；通过计算 Math.atan2(vy, vx) 获得角度；
2. 从速率减去模拟摩擦力，但不要让速率变为负数；
3. 通过正余弦函数将和速率分解为 x 轴和 y 轴上的速度。

完整示例：模拟摩擦力正确计算

(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 先求速率
  let speed = Math.sqrt(vx ** 2 + vy ** 2);
  // 算出角度
  const angle = Math.atan2(vy, vx);
  // 判断运动是否停止
  if (speed > friction) {
    // 没有停止则减去模拟摩擦力
    speed -= friction;
  } else {
    speed = 0;
  }
  // 重新分解为x轴和y轴上的速度
  vx = Math.cos(angle) * speed;
  vy = Math.sin(angle) * speed;
  ball.x += vx;
  ball.y += vy;
  ball.draw(context);
}());

简便做法

正确的做法十分繁琐，是个合成分解再合成的过程，这样对计算资源的消耗是比较大的，但我们也许并不需要这么精确的做法，只要每次将各个方向的速度乘以一个 0~1 之间的数就能简单模拟出摩擦力的效果。因此我们定义了模拟摩擦力系数。

【定义】模拟摩擦力系数是人为规定的值，会在物体运动时不断比例减少各个方向上的速度，使各个方向的速度无限接近于 0。

示例由上面的正确做法改造而来，friction 被定义为模拟摩擦力系数，指为 0.9，只要运动都将 x 轴和 y 轴方向的速度乘以这个值即可，减少了大量操作。核心代码如下：
完整示例：模拟摩擦力正确计算
注意：这里有一个细节，速度不断乘以系数会导致速度无限接近但不等于 0，为了避免做无意义的计算，可以先判断速度是否已经小到肉眼不可见的值，以提高性能。

(function drawFrame() {
  window.requestAnimationFrame(drawFrame, canvas);
  context.clearRect(0, 0, canvas.width, canvas.height);
  // 判断速度大小以减少不必要的计算
  if (Math.abs(vx) > 0.001) {
    // 减少速度
    vx *= friction;
    ball.x += vx;
  }
  if (Math.abs(vy) > 0.001) {
    vy *= friction;
    ball.y += vy;
  }
  ball.draw(context);
}());

回顾前面的示例

• 彩色喷泉
• 往鼠标方向弹动的箭头